import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { inject, observer } from "@tarojs/mobx-rn";
import { View, Input, Picker, Image, Form, Button } from "@tarojs/components-rn";
import { AtImagePicker } from 'taro-ui';
import PageFooterInfo from "../../components/PageFooterInfo";
import PickerArea from "../../components/PickerArea";
import page2StyleSheet from "./page2_styles";
import right from '../../assets/img/right.png';
import { getRuntime, projectTypeArr, projectDate, enterpriseQualificationArr } from "../../utils/common";
var _styleSheet = page2StyleSheet;
let Page1StepTwo = class Page1StepTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projectName: '',
      constructionEnterprise: '',
      guaranteeSum: null,
      address: '',
      enterpriseSituation: '',
      projectTypeArr: projectTypeArr,
      projectType: '',
      timeLimitArr: projectDate,
      timeLimit: '',
      enterpriseQualificationArr: enterpriseQualificationArr,
      enterpriseQualification: '',
      materialArr: [],
      material: '',
      principal: '',
      phoneNumber: '',
      emailAddress: '',
      loading: false,
      disabled: false,
      submitText: '立即发布'
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '工程现金' });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  pickerArea(res) {
    this.setState({
      address: res.province.label + res.city.label + res.distract.label
    });
  }
  changePicker(field, e) {
    this.setState({
      [field]: this.state[field + 'Arr'][e.detail.value]
    });
  }
  onChangeImg(type, e) {
    if (e.length <= 0) {
      return false;
    }
    // console.log(e)
    getRuntime().uploadFile(e, res => {
      this.setState({
        [type]: res.join(','),
        [type + 'Arr']: e
      });
    });
  }
  submit(e) {
    let { address, projectType, timeLimit, enterpriseQualification, material } = this.state;
    let { projectName, constructionEnterprise, guaranteeSum, enterpriseSituation, principal, phoneNumber, emailAddress } = e.detail.value;
    if (!projectName) {
      getRuntime().showToast('请填写项目名称~');
      return;
    }
    if (!constructionEnterprise) {
      getRuntime().showToast('请填写施工企业~');
      return;
    }
    if (!guaranteeSum) {
      getRuntime().showToast('请填写保证金额~');
      return;
    }
    if (!address) {
      getRuntime().showToast('请选择国家/地区~');
      return;
    }
    if (!principal) {
      getRuntime().showToast('请填写负责人~');
      return;
    }
    if (!phoneNumber) {
      getRuntime().showToast('请填写联系电话~');
      return;
    }
    let { FinancialCenterStore } = this.props.stores;
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    });
    FinancialCenterStore.saveProjectCashcs({
      form: {
        projectName,
        constructionEnterprise,
        guaranteeSum,
        address,
        enterpriseSituation,
        projectType,
        timeLimit,
        enterpriseQualification,
        material,
        principal,
        phoneNumber,
        emailAddress
      },
      callback: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即申请'
        });
        getRuntime().navigateTo('/pages/finance/finance_success');
      }
    });
  }
  render() {
    let { projectTypeArr, projectType, timeLimitArr, timeLimit, enterpriseQualificationArr, enterpriseQualification, materialArr, loading, disabled, submitText } = this.state;
    return <View style={_styleSheet["from-wrap"]}>

        <Form onSubmit={this.submit.bind(this)}>
          <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>项目名称</View>
              <Input name="projectName" placeholderClass="placeholder_class" placeholder="请填写项目名称" style={_styleSheet["from-input"]} />
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>施工企业</View>
              <Input name="constructionEnterprise" placeholderClass="placeholder_class" placeholder="请填写施工企业" style={_styleSheet["from-input"]} />
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>保证金额(万)</View>
              <Input name="guaranteeSum" type="number" placeholderClass="placeholder_class" placeholder="请填写保证金额" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>国家/地区</View>
              <PickerArea onPicketArea={this.pickerArea.bind(this)} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>企业情况</View>
              
              <Input name="enterpriseSituation" placeholderClass="placeholder_class" placeholder="请填写企业情况" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>项目类型</View>
              <Picker name="projectType" mode="selector" range={projectTypeArr} onChange={this.changePicker.bind(this, 'projectType')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  {!projectType && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>请选择</View>}
                  {projectType && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{projectType}</View>}
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>工期</View>
              <Picker name="timeLimit" mode="selector" range={timeLimitArr} onChange={this.changePicker.bind(this, 'timeLimit')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  {!timeLimit && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>请选择</View>}
                  {timeLimit && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{timeLimit}</View>}
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>企业资质</View>
              <Picker name="enterpriseQualification" mode="selector" range={enterpriseQualificationArr} onChange={this.changePicker.bind(this, 'enterpriseQualification')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  {!enterpriseQualification && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"], _styleSheet["placeholder-class"]]}>请选择</View>}
                  {enterpriseQualification && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{enterpriseQualification}</View>}
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>
          </View>

          <View style={_styleSheet["item-group"]}>
            <View style={[_styleSheet["input-group"], _styleSheet["input-upload"], _styleSheet["bbnone"]]}>
              <View style={_styleSheet["input-name"]}>上传相关资料</View>
              <AtImagePicker multiple length={4} count={2} files={materialArr} onChange={this.onChangeImg.bind(this, 'material')} />
            </View>
          </View>

          <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>负责人</View>
              <Input name="principal" placeholderClass="placeholder_class" placeholder="请填写负责人" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>联系电话</View>
              <Input name="phoneNumber" type="number" placeholderClass="placeholder_class" placeholder="请填写联系电话" style={_styleSheet["from-input"]} />
            </View>
            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>联系邮箱</View>
              <Input name="emailAddress" placeholderClass="placeholder_class" placeholder="请填写联系邮箱" style={_styleSheet["from-input"]} />
            </View>
          </View>
          <Button formType="submit" loading={loading} disabled={disabled} style={_styleSheet["page-submit"]}>{submitText}</Button>
        </Form>

        <PageFooterInfo />

      </View>;
  }
};
Page1StepTwo = tslib_1.__decorate([inject("stores"), observer], Page1StepTwo);
export default Page1StepTwo;